/**
 *   从local Storage中获取数据 
 *   渲染用户头像和昵称
 */
function doShowUser() {
    let linshiStr = localStorage.getItem('LINSHI')
    let data = JSON.parse(linshiStr)
    if (data) {
        showUser(data)
    }

}

doShowUser()

function showUser(data) {
    let userbox = document.querySelector('.userImg')
    let topStr = `<img src=${data[0].headerimg} alt="" />
    <p>${data[0].username}欢迎您</p>`
    userbox.innerHTML = topStr
}

/**
 * 实现退出页面功能
 */

function doOutPage() {
    let outBtn = document.querySelector('#outPage')
    outBtn.addEventListener('click', function () {
        localStorage.removeItem('LINSHI')
        location.href = "index.html"
        alert('退出账号成功！')
    })
}
doOutPage()

/**
 * 购物车功能模块
 */
let tableEle = document.querySelector("#showTable")
function showProductList() {

    //从localStorage 中获取数组数据
    let productDate = localStorage.getItem("ProductList");
    let productList = JSON.parse(productDate) || [];
    //制作表头
    let Str = ` <tr>    
     <td>商品ID</td>              
     <th>商品图片</th>
     <th>商品名称</th>
     <th>商品单价</th>
     <th>商品数量</th>
     <th>总价</th>
     <th>操作</th>
   </tr>`;

    var mainStr = productList
        .map(function (item) {
            console.log(productList);
            let msg = item.msg
            console.log(msg);
            let index = msg.indexOf('')
            let msgStr = msg.substring(index + 1, index + 10)

            return `<tr>
                        <td>${item.id}</td>
                        <td><img src="${item.url}" alt=""></td>
                        <td>${msgStr}...</td>
                        <td>￥ <span >${item.price}</span></td>
                        <td><button id="low" date-index="${item.id}">-</button><input type="text" value="${item.num}" ><button id="up" date-index="${item.id}">+</button></td>
                        <td >￥<span id="xdj">${item.singlePrice} </span></td>
                        <td><button id="del" date-index="${item.id}">删除</button></td>
                        </tr>
                        `
    })
        .join(""); //  .jion("")是为了将每个  tr 拼接起来
    Str += mainStr; //将表头和内容一起展示
    tableEle.innerHTML = Str; // 将合成后的内容渲染在table 中
    let toatlAmount = document.querySelector("#zongjia");
    let toatlAmounts = onTotalAmount();
    toatlAmount.innerHTML = toatlAmounts.toFixed(2);
}


//实现表格中的功能

function onPlus() {
    tableEle.addEventListener("click", function (e) {
        let productDate = localStorage.getItem("ProductList");
        let productList = JSON.parse(productDate) || [];
        e = e || window.event;
        let target = e.target || e.srcElement;
        //获取＋号
        if (target.getAttribute("id") == "up") {
            let id = target.getAttribute("date-index");
            let indexs = productList.find(function (item) {
                return item.id == id;
            });
            indexs.num++;
            indexs.singlePrice = indexs.num * indexs.price;
            indexs.singlePrice = indexs.singlePrice.toFixed(2);
            localStorage.setItem("ProductList", JSON.stringify(productList));
            showProductList();
            // 获取展示总价的地方;
            let toatlAmount = document.querySelector("#zongjia");
            let toatlAmounts = onTotalAmount();
            toatlAmount.innerHTML = toatlAmounts.toFixed(2);
        }
    });
}
//实现—号
function onMinus() {
    tableEle.addEventListener("click", function (e) {
        let productDate = localStorage.getItem("ProductList");
        let productList = JSON.parse(productDate) || [];
        e = e || window.event;
        let target = e.target || e.srcElement;
        //获取＋号
        if (target.getAttribute("id") == "low") {
            let id = target.getAttribute("date-index");
            let indexs = productList.find(function (item) {
                return item.id == id;
            });
            indexs.num--;
            if (indexs.num < 0) {
                indexs.num = 0;
            }
            indexs.singlePrice = indexs.num * indexs.price;
            indexs.singlePrice = indexs.singlePrice.toFixed(2);
            localStorage.setItem("ProductList", JSON.stringify(productList));
            showProductList();
            //获取展示总价的地方
            let toatlAmount = document.querySelector("#zongjia");
            let toatlAmounts = onTotalAmount();
            toatlAmount.innerHTML = toatlAmounts.toFixed(2);
        }
    });
}
//实现删除
function onDelect() {
    tableEle.addEventListener("click", function (e) {
        let productDate = localStorage.getItem("ProductList");
        let productList = JSON.parse(productDate) || [];
        e = e || window.event;
        let target = e.target || e.srcElement;
        if (target.getAttribute("id") == "del") {
            //获取date-index
            var id = target.getAttribute("date-index");
            let indexs = productList.indexOf(function (item) {
                item.id == id;
            });
            productList.splice(indexs, 1);
            localStorage.setItem("ProductList", JSON.stringify(productList));
            showProductList();
        }
    });
}

//计算总价
function onTotalAmount() {
    let productDate = localStorage.getItem("ProductList");
    let productList = JSON.parse(productDate) || [];
    var s = 0;
    for (let i = 0; i < productList.length; i++) {
        var price = Number(productList[i].singlePrice);
        s += price;
    }
    return s;
}
/**
 * 实现支付功能
 */
function doGoPay() {
    let payBtn = document.querySelector('#goPay')
    payBtn.addEventListener('click', function () {
        let zongjia = document.querySelector('#zongjia')
        let price = zongjia.innerHTML
        alert(`您需要支付${price}元`)
    })
}
doGoPay()
onDelect();
onMinus();
onPlus();

showProductList();
